<template>
    <!-- 客户列表 -->
    <div v-if="!customerProductAvailable && !searchProductAvailable">
        <CustomerList height="calc(100vh - 140px)" :product-search="true" v-model="customerInfo" v-model:product-list="productList"></CustomerList>
    </div>
    <!-- 点击客户后查询产品列表 -->
    <div v-if="customerProductAvailable">
        <ProductList v-model="customerInfo"></ProductList>
    </div>
    <!-- 点击搜索后展示对应产品列表 -->
    <div v-if="searchProductAvailable">
        <el-affix :offset="80">
            <el-button plain @click="backCustomerListEvent" :icon="Back">返回</el-button>
        </el-affix>
        <!-- 描述列表 -->
        <div v-for="(item, index) in productList" :key="index">
            <el-descriptions class="mt-2" :title="item.customerAbbreviation" :column="4" border>
                <div v-for="(product, i) in item.products" :key="i">
                    <el-descriptions-item label="产品名称">{{ product.productName }}</el-descriptions-item>
                    <el-descriptions-item label="产品尺寸">{{ product.productSize }}</el-descriptions-item>
                    <el-descriptions-item label="面纸规格">{{ product.tissueSize }}</el-descriptions-item>
                    <el-descriptions-item label="瓦纸规格">{{ product.corrugatedSize }}</el-descriptions-item>
                    <el-descriptions-item :span="4" label="其他信息">
                        <el-tag class="mr-2" type="primary"> 拼数：{{ product.spell }}</el-tag>
                        <el-tag class="mr-2" type="success">库存：{{ product.stock }}</el-tag>
                        <el-tag class="mr-2" type="info">压线：{{ product.crimping }}</el-tag>
                        <el-tag class="mr-2" type="warning">不含税价格：{{ product.excludTaxPrice }}</el-tag>
                        <el-tag class="mr-2" type="warning">含税价格：{{ product.includeTaxPrice }}</el-tag>
                        <el-tag class="mr-2" type="danger">{{ '工艺：' + product.process + ' ⭐ 产品描述：' + product.description }}</el-tag>
                    </el-descriptions-item>
                </div>
            </el-descriptions>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Back } from '@element-plus/icons-vue';
import ProductList from './components/ProductList.vue';

/* ******************************通用属性/方法****************************** */
// 展示单个客户所有的产品列表
const customerProductAvailable = computed(() => {
    // 此时点击了单个客户列表
    if (customerInfo.customerId !== '') {
        // 清空搜索数据
        productList.length = 0;
        return true;
    }
    return false;
});
// 展示搜索后的产品列表
const searchProductAvailable = computed(() => {
    // console.log(productList);
    // 此时搜索了产品列表
    if (productList.length !== 0) {
        // 清空客户数据
        customerInfo.customerId = '';
        return true;
    }
    return false;
});

// 获取客户信息
const customerInfo = reactive({
    customerId: '',
    customerName: '',
    customerAbbreviation: '',
});
// 搜索后的产品列表数据
const productList = reactive<{ customerAbbreviation: string; products: AjaxResponse['productList'] }[]>([]);

// 返回客户列表
const backCustomerListEvent = () => {
    // 清空搜索数据
    productList.length = 0;
    customerInfo.customerId = '';
};
</script>

<style></style>
